<template>
  <!-- 适配轮胎 -->
  <view class="adapt-tyre-container">
    <!-- 车辆信息 -->
    <view class="car-info-box">
      <view class="car">
        <image :src="carInfo.img" mode="widthFix" class="img"></image>
        <text class="ml-20">{{ carInfo.name }}</text>
      </view>
      <view class="font-26 color-333 type-num">{{ tyreVal }}</view>
    </view>

    <!-- 适配轮胎的列表 -->
    <view class="list">
      <view
        v-for="(item, i) in list"
        :key="item.id"
        class="item flex flex-ai-c"
      >
        <image :src="item.img" mode="widthFix" class="img"></image>

        <view class="right-box" @click="checkedClick(item, i)">
          <view class="name m-text-line-2">
            {{ item.name }}
          </view>

          <view class="flex flex-ai-fe flex-jc-sb">
            <text class="font-36 color-EB5C02"> ￥{{ item.price }} </text>

            <label class="radio-check">
              <i-icon
                v-show="isChecked === i"
                icon="icongouxuan"
                type="m"
                size="38rpx"
              ></i-icon>
              <i-icon
                v-show="isChecked !== i"
                icon="icontuoyuan"
                size="38rpx"
                color="#999"
              ></i-icon>
            </label>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提交栏 -->
    <footer-bar :amount="barAmount" @submit="submit"></footer-bar>
  </view>
</template>

<script>
import footerBar from '@/components/afterSales/footerBar.vue'

export default {
  components: { footerBar },
  data() {
    return {
      carInfo: {
        img: require('../../static/img/im/face/face_14.jpg'),
        name: '北京奔驰G系 2020款 G63 3.0T 双离合 四 驱 蓝调版',
      },
      tyreVal: '', // 上一页选择的轮胎规格
      list: [
        {
          id: 1,
          img:
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1625564583,4245123740&fm=26&gp=0.jpg',
          name: '倍耐力轮胎 新P1 Cinturato P1  195/65 R15 91V Pirelli...',
          price: 199.0,
          amount: 1,
        },
        {
          id: 2,
          img:
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1625564583,4245123740&fm=26&gp=0.jpg',
          name: '倍耐力轮胎 新P1 Cinturato P1  195/65 R15 91V Pirelli...',
          price: 199.0,
          amount: 1,
        },
      ],
      isChecked: -1, // 单选
      checkedVal: {}, // 选中的值

      price: {
        price: 666.0,
        oldPrice: 6666.0,
        serPrice: 76,
      },
    }
  },
  
  computed: {
    barAmount() {
      return this.isChecked !== -1 ? '1' : '0'
    }
  },

  onLoad(e) {
    this.tyreVal = e.value
  },

  methods: {
    // 勾选了轮胎
    checkedClick(item, i) {
      this.checkedVal = item
      this.isChecked = i
    },

    // 提交
    submit() {
      if (this.isChecked === -1) {
        uni.showToast({
          title: '请至少选择一个轮胎',
          icon: 'none'
        })
        return false
      }
      this.$store.commit('afterSales/setCheckedServeList', [{
        "added_Rate": 6,
        "amount": this.checkedVal.amount,
        "coupon": [],
        "goods_Name": this.checkedVal.name,
        "hasCoupon": false,
        "hasGotCoupon": false,
        "id": this.checkedVal.id,
        "in_Price": this.checkedVal.price,
        "maintenance_Goods_Type_Id": "",
        "maintenance_Type_Id": "",
        "num": "",
        "original_Price": "",
        "pic_URL": this.checkedVal.img,
        "sale_Price": "",
        "service_Fee": ""
      }])
      // 发送事件，把数据传送过去
      // uni.$emit('goodsChange', this.checkedVal)
      uni.navigateBack({
        delta: 3,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.adapt-tyre-container {
  background: #f6f6f6;

  .car-info-box {
    height: 148rpx;
    padding: 18rpx 22rpx;
    background: #ffffff;

    .car {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;

      .img {
        width: 36rpx;
        height: 36rpx;
        border-radius: 5rpx;
        vertical-align: middle;
      }

      text {
        line-height: 44rpx;
      }
    }
    
    .type-num {
      margin: 20rpx 0 20rpx 56rpx;
    }
  }

  .list {
    margin-top: 10rpx;
    background-color: #fff;

    .item {
      padding: 24rpx;

      & + .item {
        border-top: 1px solid #eee;
      }

      .img {
        width: 160rpx;
        height: 160rpx;
      }
    }

    // 右边内容
    .right-box {
      flex: 1;
      margin-left: 20rpx;

      .name {
        margin-bottom: 40rpx;
      }
    }
  }
}
</style>
